<!--回传模板-->

<template>
    <div>
        <el-row :gutter="20" class="mb-4">
            <el-col :span="4">
                <el-input v-model="search.openId" placeholder="广告名称" clearable></el-input>
            </el-col>
            <el-col :span="4">
                <el-input v-model="search.transactionId" placeholder="回传类型" clearable></el-input>
            </el-col>
            <el-col :span="4">
                <el-button type="primary" @click="handleSearch">搜索</el-button>
                <el-button @click="handleReset">重置</el-button>
            </el-col>
        </el-row>
        <el-row :gutter="20" class="mb-4">
            <el-col :span="24">
                <el-button type="primary" @click="handleAdd">新增</el-button>
                <el-button type="warning" @click="handleExport">导出</el-button>
            </el-col>
        </el-row>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="openId" label="回传模板名称"></el-table-column>
            <el-table-column prop="businessId" label="充值回传模式"></el-table-column>
            <el-table-column prop="transactionId" label="回传比例"></el-table-column>
            <el-table-column prop="paymentId" label="VIP充值上报"></el-table-column>
            <el-table-column prop="platform" label="广告类型"></el-table-column>
            <el-table-column prop="bigMoney" label="最大金额"></el-table-column>
            <el-table-column prop="somMoney" label="最小金额"></el-table-column>
            <el-table-column prop="protection" label="订单保护"></el-table-column>
            <el-table-column prop="status" label="回传模板状态"></el-table-column>
            <el-table-column prop="time" label="回传口径"></el-table-column>
            <el-table-column label="操作" width="150px">
                <template #default="scope">
                    <el-button type="text" size="small" @click="handleEdit(scope.row)">修改</el-button>
                    <el-button type="text" size="small" @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div style="margin-top: 20px; display: flex; justify-content: flex-end;">
            <el-pagination
                    v-model:current-page="currentPage"
                    v-model:page-size="pageSize"
                    :page-sizes="[10, 20, 30, 40]"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
            />
        </div>

        <!-- 新增广告配置弹窗 -->
        <el-dialog v-model="addDialogVisible" width="600px" title="新增广告配置">
            <el-form :model="addForm" :rules="rules"   label-width="120px">
                <el-form-item label="广告配置状态" >
                    <el-switch v-model="addForm.status" active-text="启用" inactive-text="关闭"></el-switch>
                </el-form-item>
                <el-form-item label="广告类型" prop="adType">
                    <el-select v-model="addForm.adType" placeholder="请选择广告类型">
                        <el-option label="头条" value="type1"></el-option>
                        <el-option label="类型2" value="type2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="充值回传模式" prop="rechargeMode" >
                    <el-radio-group v-model="addForm.rechargeMode">
                        <el-radio label="首充订单">首充订单</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="充值回传口径" prop="rechargePeriod" >
                    <el-input v-model="addForm.rechargePeriod" placeholder="以自然日X小时内回传"></el-input>
                </el-form-item>
                <el-form-item label="订单保护" required>
                    <el-input v-model="addForm.protection" placeholder="投放后前n笔必传"></el-input>
                </el-form-item>
                <el-form-item label="充值回传金额" required>
                    <el-input v-model="addForm.minAmount" placeholder="最小金额"></el-input>
                    <el-input v-model="addForm.maxAmount" placeholder="最大金额"></el-input>
                </el-form-item>
                <el-form-item label="回传比例"  required>
                    <el-radio-group v-model="addForm.rechargeRatio">
                        <el-radio label="全量" @change="notCirculate">全部回传</el-radio>
                        <el-radio label="固定间隔"  @change="circulate">循环比例</el-radio>
                        <el-radio label="全部不回传"  @change="notCirculate">全部不回传</el-radio>
                    </el-radio-group>
                </el-form-item>
                <div v-if="addForm.showStatus">
                <el-form-item label="充值回传" required>
                    <el-select v-model="addForm.rechargeType" placeholder="请选择回传类型">
                        <el-option label="全部回传" value="全部回传"></el-option>
                        <el-option label="全部不回传" value="全部不回传"></el-option>
                        <el-option label="传1扣1" value="传1扣1"></el-option>
                        <el-option label="传2扣1" value="传2扣1"></el-option>
                        <el-option label="传3扣1" value="传3扣1"></el-option>
                        <el-option label="传1扣2" value="传1扣2"></el-option>
                        <el-option label="传1扣3" value="传1扣3"></el-option>
                    </el-select>
                </el-form-item>
                </div>
                <el-form-item label="VIP充值上报" prop="vipReport">
                    <el-switch v-model="addForm.vipReport" active-text="开启" inactive-text="关闭"></el-switch>
                </el-form-item>
                <el-form-item label="广告配置名称" prop="adConfigName">
                    <el-input v-model="addForm.adConfigName" placeholder="请输入广告配置名称"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button style="margin-left: 400px;" @click="addDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="handleAddSubmit">确定</el-button>
            </div>
        </el-dialog>

        <!-- 修改广告配置弹窗 -->
        <el-dialog v-model="updateDialogVisible" width="600px" title="修改广告配置">
            <el-form :model="updateForm" :rules="rules"   label-width="120px">
                <el-form-item label="广告配置状态"  >
                    <el-switch v-model="updateForm.status" active-text="启用" inactive-text="关闭"></el-switch>
                </el-form-item>
                <el-form-item label="广告类型" prop="adType">
                    <el-select v-model="updateForm.adType" placeholder="请选择广告类型">
                        <el-option label="头条" value="type1"></el-option>
                        <el-option label="类型2" value="type2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="充值回传模式" prop="rechargeMode" >
                    <el-radio-group v-model="updateForm.rechargeMode">
                        <el-radio label="首充订单">首充订单</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="充值回传口径" prop="rechargePeriod" >
                    <el-input v-model="updateForm.rechargePeriod" placeholder="以自然日X小时内回传"></el-input>
                </el-form-item>
                <el-form-item label="订单保护" required>
                    <el-input v-model="updateForm.protection" placeholder="投放后前n笔必传"></el-input>
                </el-form-item>
                <el-form-item label="充值回传金额" required>
                    <el-input v-model="updateForm.minAmount" placeholder="最小金额"></el-input>
                    <el-input v-model="updateForm.maxAmount" placeholder="最大金额"></el-input>
                </el-form-item>
                <el-form-item label="回传比例"  required>
                    <el-radio-group v-model="updateForm.rechargeRatio">
                        <el-radio label="全量" @change="notCirculate">全部回传</el-radio>
                        <el-radio label="循环比例" @change="circulate">循环比例</el-radio>
                        <el-radio label="全部不回传" @change="notCirculate">全部不回传</el-radio>
                    </el-radio-group>
                </el-form-item>
                <div v-if="updateForm.showStatus">
                <el-form-item label="充值回传" required>
                    <el-select v-model="updateForm.rechargeType" placeholder="请选择回传类型">
                        <el-option label="全部回传" value="全部回传"></el-option>
                        <el-option label="全部不回传" value="全部不回传"></el-option>
                        <el-option label="传1扣1" value="传1扣1"></el-option>
                        <el-option label="传2扣1" value="传2扣1"></el-option>
                        <el-option label="传3扣1" value="传3扣1"></el-option>
                        <el-option label="传1扣2" value="传1扣2"></el-option>
                        <el-option label="传1扣3" value="传1扣3"></el-option>
                    </el-select>
                </el-form-item>
                </div>
                <el-form-item label="VIP充值上报" prop="vipReport">
                    <el-switch v-model="updateForm.vipReport" active-text="开启" inactive-text="关闭"></el-switch>
                </el-form-item>

                <el-form-item label="广告配置名称" prop="adConfigName">
                    <el-input v-model="updateForm.adConfigName" placeholder="请输入广告配置名称"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button style="margin-left: 400px;" @click="updateDialogVisible = false,  updateForm.value.showStatus=false">取消</el-button>
                <el-button type="primary" @click="handleUpdateSubmit">确定</el-button>
            </div>
        </el-dialog>


    </div>
</template>

<script setup>
    import { ref } from 'vue'
    import { ElMessageBox, ElMessage } from 'element-plus'

    const search = ref({
        openId: '',
        transactionId: '',
        paymentId: '',
        status: '',
    })

    const tableData = ref([
        { openId: '回传模板1', businessId: '首充订单', transactionId: '全量', paymentId: '开启', platform: '头条', bigMoney:'10000', somMoney:'1000', protection:'10', status:'启用', time:'10'},
        { openId: '回传模板2', businessId: '首充订单', transactionId: '全量', paymentId: '关闭', platform: '头条', bigMoney:'100', somMoney:'10', protection:'1', status:'启用', time:'10'},
        { openId: '回传模板3', businessId: '首充订单', transactionId: '固定间隔', paymentId: '开启', platform: '头条', bigMoney:'2500', somMoney:'100', protection:'5', status:'启用', time:'10'},
    ])

    const total = ref(tableData.value.length)
    const pageSize = ref(10)
    const currentPage = ref(1)

    const addDialogVisible = ref(false)

    const updateDialogVisible = ref(false)
    const postbacks = ref(false)
    const addForm = ref({
        status: false,
        adType: '',
        rechargeMode: '',
        rechargePeriod: '',
        minAmount: '',
        maxAmount: '',
        rechargeRatio: '',
        vipReport: false,
        adConfigName: '',
        rechargeType:'',
        protection:'',
        showStatus:false
    })

    const updateForm = ref({
        status: false,
        adType: '',
        rechargeMode: '',
        rechargePeriod: '',
        minAmount: '',
        maxAmount: '',
        rechargeRatio: '',
        vipReport: false,
        adConfigName: '',
        rechargeType:'',
        protection:'',
        showStatus:false
    })
    const rules = ref({
        adType: [{ required: true, message: '请选择广告类型', trigger: 'change' }],
        rechargeMode: [{ required: true, message: '请选择充值回传模式', trigger: 'change' }],
        rechargePeriod: [{ required: true, message: '请输入回传口径', trigger: 'blur' }],
        minAmount: [{ required: true, message: '请输入最小金额', trigger: 'blur' }],
        maxAmount: [{ required: true, message: '请输入最大金额', trigger: 'blur' }],
        rechargeRatio: [{ required: true, message: '请选择回传比例', trigger: 'change' }],
        vipReport: [{ required: true, message: '请选择VIP充值上报状态', trigger: 'change' }],
        adConfigName: [{ required: true, message: '请输入广告配置名称', trigger: 'blur' }],
    })

    const handleSearch = () => {
        console.log('搜索条件:', search.value)
        // 在这里添加搜索功能
    }

    const handleReset = () => {
        search.value = {
            openId: '',
            transactionId: '',
            paymentId: '',
            status: '',
        }
        console.log('重置搜索条件')
        // 在这里添加重置功能
    }

    const handleAdd = () => {
        // Reset the form values when opening the dialog
        addForm.value = {
            status: false,
            adType: '',
            rechargeMode: '首充订单',
            rechargePeriod: '',
            minAmount: '',
            maxAmount: '',
            rechargeRatio: '',
            vipReport: false,
            adConfigName: '',
            protection:'',
            showStatus:false
        }
        addDialogVisible.value = true
    }

    const handleUpdateSubmit = () => {
        // 在这里添加修改广告配置的功能
        updateDialogVisible.value = false
        updateForm.value.showStatus=false
    }

    const handleExport = () => {
        console.log('导出按钮点击')
        // 在这里添加导出功能
    }

    const handleEdit = (row) => {
        updateDialogVisible.value = true
        updateOrderForm.value = { ...row };
        updateForm.value.showStatus=false
        console.log('修改订单', row)
        // 在这里添加修改功能
    }

    const handleDelete = (row) => {
        ElMessageBox.confirm('此操作将永久删除该订单, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }).then(() => {
            ElMessage.success('删除成功')
            // Implement delete logic here
        }).catch(() => {
            ElMessage.error('删除失败')
            // Handle cancel action
        })
    }

    const handleSizeChange = (newSize) => {
        pageSize.value = newSize
        console.log('每页显示数量变化', newSize)
        // 在这里添加处理分页大小变化的功能
    }

    const handleCurrentChange = (newPage) => {
        currentPage.value = newPage
        console.log('当前页码变化', newPage)
        // 在这里添加处理页码变化的功能
    }

    const circulate= ()=>{
        updateForm.value.showStatus=true
        addForm.value.showStatus=true
    }

    const notCirculate= ()=>{
        updateForm.value.showStatus=false
        addForm.value.showStatus=false
    }
</script>

<style scoped>
    .mb-4 {
        margin-bottom: 16px;
    }
</style>
